import React, {useState} from 'react';
import {ActionConfig, ColumnsConfig} from "../../components/AntdCrud";
import CrudPage from "../../components/CrudPage";
import {EditLayout} from "../../components/AntdCrud/EditForm.tsx";
import {dateFormat} from "../../libs/utils.ts";
import {Button, message, Modal} from "antd";
import {usePostManual} from "../../hooks/useApis.ts";
import {useCheckPermission} from "../../hooks/usePermissions.tsx";


//字段配置
const columnsConfig: ColumnsConfig<any> = [
    {
        hidden: true,
        form: {
            type: "hidden"
        },
        dataIndex: "id",
        key: "id"
    },
    {
        form: {
            type: "input"
        },
        dataIndex: "apiKey",
        title: "apiKey",
        key: "apiKey",
        supportSearch: true,
        editCondition: (data) => {
            return data?.id === undefined;
        }
    },
    {
        form: {
            type: "select"
        },
        dataIndex: "status",
        title: "状态",
        key: "status",
        supportSearch: true,

        dict: {
            name: "dataStatus"
        }
    },
    {
        form: {
            type: "hidden"
        },
        dataIndex: "created",
        render: (value) => {
            return <span>{dateFormat(value, "YYYY-MM-DD HH:mm:ss")}</span>
        },
        title: "创建时间",
        key: "created",
        editCondition: (data) => {
            return data?.id === undefined;
        }
    },
    {
        form: {
            type: "datetimepicker"
        },
        dataIndex: "expiredAt",
        title: "失效时间",
        key: "expiredAt",
        render: (value) => {
            return <span>{dateFormat(value, "YYYY-MM-DD HH:mm:ss")}</span>
        },
    }

];
//编辑页面设置
const editLayout = {
    labelLayout: "horizontal",
    labelWidth: 80,
    columnsCount: 1,
    openType: "modal",
} as EditLayout;


//操作列配置
const actionConfig = {
    detailButtonEnable: false,
    deleteButtonEnable: true,
    editButtonEnable: true,
    hidden: false,
    width: "200px",

} as ActionConfig<any>

export const SysApiKey: React.FC = () => {
    const {doPost: useApiKeyPost} = usePostManual('/api/v1/sysApiKey/key/save');
    const [refreshTrigger, setRefreshTrigger] = useState(0);

    const canSave = useCheckPermission("/api/v1/sysApiKey/save")

    return (
        <CrudPage columnsConfig={columnsConfig} tableAlias="sysApiKey" addButtonEnable={false}
                  externalRefreshTrigger={refreshTrigger}
                  customButton={() => {
                      return <>{canSave && <Button type="primary" onClick={() => {
                          Modal.confirm({
                              title: '提示',
                              content: '该操作会生成一个apiKey,请确认是否生成',
                              okText: '确定',
                              cancelText: '取消',
                              onOk() {
                                  // console.log('OK');
                                  useApiKeyPost().then((res) => {
                                      console.log('res');
                                      console.log(res);
                                      if (res.data.errorCode === 0) {
                                          message.success("apiKey生成成功");
                                          setRefreshTrigger(prev => prev + 1);
                                      }
                                  })
                              },
                          });
                      }}>新增</Button>}</>
                  }}
                  actionConfig={actionConfig} editLayout={editLayout}/>
    )
};

export default {
    path: "/sys/sysApiKey",
    element: SysApiKey
};
